<!--
This Source Code Form is subject to the terms of the Mozilla Public
License, v. 2.0. If a copy of the MPL was not distributed with this
file, You can obtain one at http://mozilla.org/MPL/2.0/.

Copyright (c) 2023-present Kaleidos INC
-->

<ng-container *transloco="let t; read: 'user_settings.sections'">
  <tg-title
    [title]="
      t('page_title', {
        pageName: t('preferences')
      })
    ">
  </tg-title>
  <div class="menu-wrapper">
    <nav
      *ngIf="model$ | async as vm"
      aria-labelledby="user-settings-menu-label"
      class="menu">
      <p
        id="user-settings-menu-label"
        class="user-settings-title">
        {{ t('user_settings') }}
      </p>
      <ul class="user-settings-menu">
        <li class="user-settings-menu-item">
          <a
            class="user-settings-menu-anchor"
            routerLink="/user-settings/account"
            routerLinkActive="active"
            >{{ t('account') }}</a
          >
          <ul class="user-settings-submenu">
            <li class="user-settings-submenu-item">
              <a
                class="user-settings-submenu-anchor"
                [class.active]="vm.currentFragment === 'delete-account'"
                routerLink="/user-settings/account"
                fragment="delete-account"
                >{{ t('delete_account') }}
              </a>
            </li>
          </ul>
        </li>
        <li class="user-settings-menu-item">
          <a
            class="user-settings-menu-anchor"
            routerLink="/user-settings/preferences"
            routerLinkActive="active"
            >{{ t('preferences') }}</a
          >
          <ul class="user-settings-submenu">
            <li class="user-settings-submenu-item">
              <a
                class="user-settings-submenu-anchor"
                [class.active]="vm.currentFragment === 'language'"
                routerLink="/user-settings/preferences"
                fragment="language"
                >{{ t('language') }}
              </a>
            </li>
          </ul>
        </li>
      </ul>
    </nav>
  </div>
  <div class="user-settings-container">
    <router-outlet></router-outlet>
  </div>
</ng-container>
